<template>
    <div>
        <!--录制语音音量遮幕层-->
        <div class="recording" style="display: none;" id="recording">
            <div class="recording-voice" style="display: none;" id="recording-voice">
                <div class="voice-inner">
                    <div class="voice-icon"></div>
                    <div class="voice-volume">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <p>手指上划,取消录制</p>
            </div>
            <div class="recording-cancel" style="display: none;">
                <div class="cancel-inner"></div>
                <p>松开手指,取消录制</p>
            </div>
        </div>
        <!--底部多媒体导航栏-->
        <div class="main-div">
            <div class="box"
                 v-bind:class="classKeyboardSizes">
                <!--<p @click="clickVoicePanel">语音录制</p>-->
                <!--<p @click="clickPicture">选择相册</p>-->
                <!--<p @click="clickPhoto">拍照</p>-->
                <!--<p @click="clickKeyboard" >弹起软键盘</p>-->

                <img id="voice"
                     v-logopress
                     @click="clickVoicePanel"
                     slot="left"
                     src="../assets/icon-voice_icon.png"
                     @touchstart="logoTouchStartAudio('voice')"
                     @touchend="logoTouchEndAudio('voice')"
                     class="logo-part">
                <img id="picute"
                     v-logopress
                     @click="clickPicture"
                     slot="left"
                     src="../assets/icon-tupian.png"
                     @touchstart="logoTouchStartAudio('picute')"
                     @touchend="logoTouchEndAudio('voice')"
                     class="logo-part">
                <img id="photo"
                     v-logopress
                     @click="clickPhoto"
                     slot="left"
                     src="../assets/icon-zhaoxiangji.png"
                     @touchstart="logoTouchStartAudio('photo')"
                     @touchend="logoTouchEndAudio('voice')"
                     class="logo-part">
                <img id="keyboard"
                     v-logopress
                     @click="clickKeyboard"
                     slot="left"
                     src="../assets/icon-jianpan.png"
                     @touchstart="logoTouchStartAudio('keyboard')"
                     @touchend="logoTouchEndAudio('voice')"
                     class="logo-part">

                <!--<i id="voice" @click="clickVoicePanel" slot="left" class="iconfont icon-voice_icon"></i>-->
                <!--<i id="picute" @click="clickPicture" slot="left" class="iconfont icon-tupian"></i>-->
                <!--<i id="photo" @click="clickPhoto" slot="left" class="iconfont icon-zhaoxiangji"></i>-->
                <!--<i id="keyboard" @click="clickKeyboard" slot="left" class="iconfont icon-jianpan"></i>-->
            </div>
            <!--语音录制控制弹出层-->
            <div v-show="isShowAudio" class="buttom-video-panel">
                <!--<img @touchstart="touchStartAudio" @touchend="touchEndAudio"  class="img-video" src="../assets/logo.jpg" alt="">-->
                <!--class="img-video"-->
                <div>
                    <span>{{timeInterval}}</span>
                </div>
                <div>
                    <span class="audio-text-prompt">{{showPromptText}}</span>
                </div>
                <!--<i v-press-->
                   <!--class="iconfont icon-yuyin audio-logo-panel blue-color"-->
                   <!--@touchstart="touchStartAudio($event)"-->
                   <!--@touchend="touchEndAudio($event)"></i>-->
                <img v-press
                     src="../assets/icon-yuyin.png"
                   class="audio-logo-panel"
                   @touchstart="touchStartAudio($event)"
                   @touchend="touchEndAudio($event)">
                <!--<img @touchstart="touchStartAudio" @touchend="touchEndAudio"  v-press  src="../assets/logo.jpg" alt="">-->
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "multimediaComponent",
        data() {
            return {
                isShowAudio: false,
                showPromptText: '按住说话',
                timeInterval : '00:00',
                timer: null,
                checkAndroidOrIOS: '',
                iosScreenSizes: 0,
            }
        },
        props: {
            isMultimediaFocus: {
                type: Boolean,
                default() {
                    return false
                }
            },
        },
        created() {
            clearInterval(this.timer);
            // this.iosScreenSizes = window.innerHeight;
            // this.iosScreenSizes= document.documentElement.clientHeight;
            this.checkAppAndroidOrIOS();
            // this.$dialog.confirm({
            //     title: 'window.innerHeight',
            //     mes: window.innerHeight,
            //     opts: () => {}
            // });
            // this.$dialog.confirm({
            //     title: 'document.documentElement.clientHeight',
            //     mes: window.innerHeight+'*****'+document.documentElement.clientHeight,
            //     opts: () => {}
            // });
        },
        computed: {
            classKeyboardSizes: function () {
                // if (this.isMultimediaFocus && this.checkAndroidOrIOS==='ios') {
                //     return {
                //         'iphone5-box-bottom': this.iosScreenSizes === 504,
                //         'iphone6-box-bottom': this.iosScreenSizes === 603,
                //         'iphone6Plus-box-bottom': this.iosScreenSizes === 672,
                //         'iphone7-box-bottom': this.iosScreenSizes === 603,
                //         'iphone7Plus-box-bottom': this.iosScreenSizes === 672,
                //
                //         'iphone8Plush-box-bottom': this.iosScreenSizes === 623,
                //         'iphoneX-box-bottom': this.iosScreenSizes === 724
                //     };
                // }
            }
        },
        directives: {
            logopress: {
                inserted(element,binding) {
                    element.addEventListener('touchstart',function (e) {
                        console.log('touchstart');

                    },false);
                    element.addEventListener('touchend',function (e) {
                        console.log('touchend');
                    },false);
                }
            },
            press: {
                inserted(element, binding) {
                    var recording = document.querySelector('.recording'),
                        recordingVoice = document.querySelector('.recording-voice'),
                        recordingCancel = document.querySelector('.recording-cancel'),
                        startTx, startTy;
                    element.addEventListener('touchstart', function(e) {
                        // 用bind时，vue还没插入到dom,故dom获取为 undefine，用 inserted 代替 bind,也可以开个0秒的定时器
                        // element.className = "chat-say say-active";
                        // recording.style.display = recordingVoice.style.display = "block";
                        // // console.log('start')
                        var touches = e.touches[0];
                        startTx = touches.clientX;
                        startTy = touches.clientY;
                        console.log("按下了");
                        e.preventDefault();
                    }, false);
                    element.addEventListener('touchend', function(e) {
                        var touches = e.changedTouches[0];
                        var distanceY = startTy - touches.clientY;
                        console.log("抬起");
                        // if (distanceY > 50) {
                        //     console.log("取消发送信息");
                        // }else{
                        //     console.log("发送信息");
                        // }

                        // element.className = "chat-say";
                        // recordingCancel.style.display = recording.style.display = recordingVoice.style.display = "none";
                        // console.log('end');
                        e.preventDefault()
                    }, false);
                    element.addEventListener('touchmove', function(e) {
                        var touches = e.changedTouches[0],
                            endTx = touches.clientX,
                            endTy = touches.clientY,
                            distanceX = startTx - endTx,
                            distanceY = startTy - endTy;

                        // if (distanceY > 50) {
                        //     element.className = "chat-say";
                        //     recordingVoice.style.display = "none";
                        //     recordingCancel.style.display = "block"
                        // }else{
                        //     element.className = "chat-say say-active";
                        //     recordingVoice.style.display = "block";
                        //     recordingCancel.style.display = "none"
                        // }
                        // 阻断事件冒泡 防止页面被一同向上滑动
                        e.preventDefault()
                    }, false);
                }
            },
        },
        methods: {
            clickVoicePanel() {
                console.log('clickVoicePanel');
                this.isShowAudio = !this.isShowAudio;
                this.$emit('clickVoicePanel');
            },
            touchStartAudio(event) {
                let that = this;
                console.log('touchStartAudio');
                clearInterval(this.timer);
                var n = 0;
                this.timer = setInterval(function () {
                    n += 1;
                    var m = parseInt(n/60);
                    var s = parseInt(n%60);
                    that.timeInterval= toDubFunc(m)+":"+ toDubFunc(s);
                },1000);
                this.showPromptText = '松手保存,上滑取消';
                this.$emit('touchStartAudio',{event: event});

                function toDubFunc(n) {
                    return n<10?"0"+n:""+n;
                }
            },
            touchEndAudio(event) {
                console.log('touchEndAudio');
                this.timeInterval = '00:00';
                this.n = 0;
                clearInterval(this.timer);
                this.showPromptText = '按住说话';
                this.$emit('touchEndAudio',{event: event})
            },
            clickPicture() {
                this.$emit('clickPicture');
            },
            clickPhoto() {
                this.$emit('clickPhoto');
            },
            clickKeyboard() {
                this.isShowAudio = false;
                console.log('clickKeyboard');
                this.$emit('clickKeyboard');
            },
            // 解决输入法被激活时 底部输入框被遮住问题
            focusIpt() {
                // this.timer = setInterval(function() {
                //     document.body.scrollTop = document.body.scrollHeight
                // }, 100)
                // document.body.scrollTop = document.body.scrollHeight
            },
            blurIpt() {
                // clearInterval(this.timer)
            },
            logoTouchStartAudio(type) {
                var voiceLogo = document.getElementById('voice');
                var picuteLogo = document.getElementById('picute');
                var photoLogo = document.getElementById('photo');
                var keyboardLogo = document.getElementById('keyboard');
                if (type === 'voice') {
                    voiceLogo.src = require('../assets/icon-voice_icon-enable.png');
                } else if (type === 'picute') {
                    picuteLogo.src = require('../assets/icon-tupian-enable.png');
                } else if (type === 'photo') {
                    photoLogo.src = require('../assets/icon-zhaoxiangji-enable.png');
                } else if (type === 'keyboard') {
                    keyboardLogo.src = require('../assets/icon-jianpan-enable.png');
                }
            },
            logoTouchEndAudio(type) {
                var voiceLogo = document.getElementById('voice');
                var picuteLogo = document.getElementById('picute');
                var photoLogo = document.getElementById('photo');
                var keyboardLogo = document.getElementById('keyboard');

                voiceLogo.src = require('../assets/icon-voice_icon.png');
                picuteLogo.src = require('../assets/icon-tupian.png');
                photoLogo.src = require('../assets/icon-zhaoxiangji.png');
                keyboardLogo.src = require('../assets/icon-jianpan.png');
            },
            checkAppAndroidOrIOS() {
                // alert(navigator.userAgent);
                let ua = navigator.userAgent.toLowerCase();
                //android终端
                let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
                //ios终端
                let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

                if (isAndroid === true) {
                    this.checkAndroidOrIOS = 'Android';
                } else if (isiOS === true) {
                    this.checkAndroidOrIOS = 'ios';
                } else {
                    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
                        // alert(navigator.userAgent);
                        this.checkAndroidOrIOS = 'ios';
                    } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
                        // alert(navigator.userAgent);
                        this.checkAndroidOrIOS = 'Android';
                    } else {//pc
                        this.checkAndroidOrIOS = 'none';
                    };
                }
                console.log('check android or ios');
                console.log(this.checkAndroidOrIOS);

                // this.$dialog.confirm({
                //     title: 'check android or ios',
                //     mes: this.checkAndroidOrIOS,
                //     opts: () => {}
                // });
            }
        },
    }
</script>

<style lang="scss">
    .main-div {
        /*z-index: auto;*/
        z-index: 400;
        background: #ffffff;
        /*overflow: hidden;*/
        align-items: center;

        .iphone5-box-bottom {
            background: #ffffff;
            margin-bottom:  3.6rem;
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .iphone6-box-bottom {
            background: #ffffff;
            margin-bottom:  4.3rem;
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .iphone6Plus-box-bottom {
            /*background: #ffffff;*/
            /*margin-bottom:  4.4rem;*/
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .iphone7-box-bottom {
            background: #ffffff;
            margin-bottom:  4.3rem;
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .iphone7Plus-box-bottom {
            background: #ffffff;
            margin-bottom:  5.1rem;
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .iphone8-box-bottom {
            /*background: #ffffff;*/
            /*margin-bottom:  4.4rem;*/
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .iphone8Plush-box-bottom {
            background: #ffffff;
            position: fixed;
            width: 100%;
            bottom: 4.4rem;
            left: 0;
            right: 0;
        }

        .iphoneX-box-bottom {
            background: #ffffff;
            margin-bottom:  5.1rem;
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
        }


        .box {
            display: flex;
            justify-content: space-around;
            background: #ffffff;

            .logo-part {
                width: 0.7rem;
                height: 0.7rem;
            }

            #voice {
                color: #000;
            }

            #voice:active {
                color: #3cc8a8;
            }

            #picute {
                color: #000;
            }

            #picute:active {
                color: #3cc8a8;
            }


            #photo {
                color: #000;
            }

            #photo:active {
                color: #3cc8a8;
            }

            #keyboard {
                color: #000;
            }

            #keyboard:active {
                color: #3cc8a8;
            }

        }

        .buttom-video-panel {
            width: 100%;
            padding: 0.5rem;

            .audio-text-prompt {
                font-size: 1.3em;
                margin-bottom: 0.5rem;
            }

            .audio-logo-panel {
                font-size: 1.2rem;
                width: 1.4rem;
                height: 1.4rem;
            }
        }
    }

    .img-video {
        width: 1.5rem;
        height: 1.5rem;
    }

    .recording {
        position: fixed;
        left: 50%;
        top: 45%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 140px;
        height: 140px;
        padding: 5px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #ffffff;
        border-radius: 5px;
        font-size: 14px;
        text-align: center
    }

    .recording-voice .voice-inner {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        height: 110px
    }

    .voice-inner .voice-icon {
        width: 55px;
        height: 90px;
        background: url(../assets/recording-bkg.png) no-repeat center center;
        background-size: contain
    }

    .voice-inner .voice-volume {
        width: 30px;
        height: 55px
    }

    .voice-inner .voice-volume span {
        display: block;
        height: 2px;
        margin-top: 4px;
        min-width: 8px;
        float: left;
        clear: both;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-duration: 2000ms;
        animation-duration: 2000ms;
        background-color: #e4e4e5
    }

    .voice-inner .voice-volume span:nth-child(1) {
        width: 24px;
        visibility: hidden
    }

    .voice-inner .voice-volume span:nth-child(2) {
        width: 22px
    }

    .voice-inner .voice-volume span:nth-child(3) {
        width: 20px
    }

    .voice-inner .voice-volume span:nth-child(4) {
        width: 18px
    }

    .voice-inner .voice-volume span:nth-child(5) {
        width: 16px
    }

    .voice-inner .voice-volume span:nth-child(6) {
        width: 14px
    }

    .voice-inner .voice-volume span:nth-child(7) {
        width: 12px
    }

    .voice-inner .voice-volume span:nth-child(8) {
        width: 10px
    }

    .voice-inner .voice-volume span:nth-child(9) {
        width: 8px
    }

    .recording-cancel p {
        border-radius: 3px;
        background-color: #9d383e
    }

    .cancel-inner {
        width: 110px;
        height: 110px;
        margin: 0 auto;
        background-image: url(../assets/record-cancel.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain
    }
</style>